// Login.tsx
import React, { useState } from "react";
import "../../css/Login/Login.css";
import redbook from "../../assets/images/red.png";
import Goodnews from "../../assets/images/喜报.png";
import launch from '../../assets/images/launch.png'
import Stow from '../../assets/images/Stow.png'
function Login() {
  const [isExpanded, setIsExpanded] = useState(true);

  // 分四行数据结构
  const contentLines = [
    {
      id: 1,
      items: [
        "为你推荐",
        "端午节",
       
        "儿童节",
         { type: "image", src: redbook },
         "邀请函",
        { type: "image", src: Goodnews },
        "早安",
        "简历",
        "名片印刷",
        "招聘",
        "商品主图",
        "教育培训",
      ],
    },
    {
      id: 2,
      items: [
        "主图图标",
        "直播背景",
        "全屏海报",
        "长图海报",
        "PPT",
        "图文带货",
        "奖状",
        "出海电商",
        "倒计时",
        "横版海报",
        "主图图标",
      ],
    },
    {
      id: 3,
      items: [
        "LOGO",
        "科技风",
        "抖音",
        "直播贴片",
        "菜单",
        "美业",
        "公众号次图",
        "视频边框",
        "翻页H5",
        "长页H5",
        "价目表",
      ],
    },
    { id: 4, items: ["知识科普", "活动宣传", "地产家居", "社交生活"] },
  ];

  return (
    <div className="recommendation-container">
      {/* 第一行 */}
      <div className="content-line first-line">
        {contentLines[0].items.map((item, index) =>
          typeof item === "object" ? (
            <div key={index} className="image-item">
              <img src={item.src} alt="" className="icon-image" />
            </div>
          ) : (
            <div
              key={index}
              className={`text-item ${index === 0 ? "title-item" : ""}`}
            >
              {item}
            </div>
          )
        )}
         <button
          className="expand-button"
          onClick={() => setIsExpanded(!isExpanded)}
        >
          <img 
            src={isExpanded ? Stow : launch} 
            alt="toggle" 
            className="toggle-icon" 
          />
        </button>
      </div>

      {/* 折叠内容 */}
      {isExpanded && (
        <div className="collapsible-content">
          {contentLines.slice(1).map((line) => (
            <div key={line.id} className="content-line subsequent-line">
              {line.items.map((item, index) =>
                typeof item === "object" ? (
                  <div key={index} className="image-item">
                  </div>
                ) : (
                  <div key={index} className="text-item">
                    {item}
                  </div>
                )
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default Login;
